<template>
<div class="experiment-list">
    <div class="box-top">
        <el-form @submit.native.prevent class="form-between">
            <el-form-item label="">
                <el-button type="primary" @click="handleAddExp">新增</el-button>
            </el-form-item>
            <el-form-item label="">
                <el-input clearable @clear="search" placeholder="请输入实验名称" @keyup.enter.native="search" v-model="keyword">
                    <i slot="prefix" class="iconfont icon-sousuo" v-preventReClick="2000" @click="search"></i>
                </el-input>
            </el-form-item>
            <!-- <el-form-item>
                <el-button type="primary" v-preventReClick="2000" @click="search">查询</el-button>
                <el-button v-preventReClick="2000" @click="reset">重置</el-button>
            </el-form-item> -->
        </el-form>
    </div>
    <div class="box-table">
        <el-table height="100%" v-loading="loading" :data="tableData" tooltip-effect="dark">
            <template slot="empty">
                <no-data :types="isSearch">
                    <span>暂无数据</span>
                </no-data>
            </template>
            <el-table-column prop="experimentName" label="实验名称" show-overflow-tooltip></el-table-column>
            <el-table-column label="状态" show-overflow-tooltip>
                <template slot-scope="scope">{{status[scope.row.flowState]}}</template>
            </el-table-column>
            <el-table-column prop="createOper" label="创建人" show-overflow-tooltip></el-table-column>
            <el-table-column sortable prop="createTime" label="创建时间" show-overflow-tooltip min-width="100"></el-table-column>
            <el-table-column prop="lastUpdateOper" label="修改人" show-overflow-tooltip></el-table-column>
            <el-table-column sortable prop="lastUpdateTime" label="更新时间" show-overflow-tooltip min-width="100"></el-table-column>
            <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleToExpEdit(scope.row)">打开</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text" @click="handleRemove(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div v-if="tableData.length>0" class="box-pagenation">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
    <add-exp v-if="addExpForm.show" :addForm="addExpForm" @save="handleSaveExpDialog"></add-exp>
</div>
</template>

<script>
import {
    mapGetters,
    mapMutations
} from 'vuex'
import AddExp from '../expEdit/AddExp'
import NoData from '@/components/NoData'
export default {
    name: 'ExpList',
    components: {
        AddExp,
        NoData
    },
    data () {
        return {
            status: ['草稿', '准备中', '运行中', '运行结束'],
            addExpForm: {
                show: false,
                title: '新增实验',
                form: {
                    catalogId: null,
                    experimentName: null,
                    description: null
                }
            },
            loading: false,
            keyword: '',
            total: 0,
            pageSize: 10,
            currentPage: 1,
            tableData: [],
            isSearch: false
        }
    },
    created () {
        this.init()
    },
    computed: {
        ...mapGetters({
            projectId: 'common/getProjectId',
            runingStatus: 'common/getRuningStatus',
            typeId: 'common/getTypeId'
        })
    },
    methods: {
        ...mapMutations({
            setUpdateExp: 'common/setUpdateExp',
            setTypeId: 'common/setTypeId',
            setRemoveExp: 'common/setRemoveExp'
        }),
        // 实验保存
        handleSaveExpDialog () {
            const {
                experimentName,
                description,
                catalogId
            } = this.addExpForm.form
            const params = {
                projectId: this.projectId,
                experimentName,
                description,
                catalogId
            }
            this.$post('/experiment/createExperiment', params).then(res => {
                if (res) {
                    this.addExpForm.show = false
                    this.$message.success('保存成功')
                    this.typeId !== 0 && this.setTypeId(0)
                    this.$router.push({
                        name: '实验编辑',
                        params: {
                            experimentId: res.experimentId
                        }
                    })
                }
            })
        },
        // 新增实验
        handleAddExp () {
            this.addExpForm = {
                show: true,
                title: '新增实验',
                form: {
                    catalogId: null,
                    experimentName: null,
                    description: null
                }
            }
        },
        // 跳转到画布页面
        handleToExpEdit (item) {
            this.typeId !== 0 && this.setTypeId(0)
            this.$router.push({
                name: '实验编辑',
                params: { experimentId: item.experimentId }
            })
        },
        search () {
            this.currentPage = 1
            this.isSearch = true
            this.init()
        },
        init () {
            this.loading = true
            const params = {
                projectId: this.projectId,
                keyword: this.keyword,
                pageSize: this.pageSize,
                pageNum: this.currentPage
            }
            this.$post('/experiment/queryExperiments', params).then(res => {
                if (res) {
                    const {
                        total,
                        rows
                    } = res
                    this.total = total
                    this.tableData = rows
                }
            }).finally(() => {
                this.loading = false
            })
        },
        reset () {
            this.keyword = ''
            this.isSearch = false
            this.currentPage = 1
            this.init()
        },
        handleRemove (item) {
            let flag = false
            let arr = JSON.parse(localStorage.getItem('editableTabs'))
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].experimentId === item.experimentId) {
                    flag = true
                    break
                }
            }
            if (!flag) {
                this.$confirm(`确定要删除实验<span>[${item.experimentName}]</span>吗？</br>删除后，实验下的模型也将一并被删除，请确认后再进行删除。`, '提示', {
                    confirmButtonText: '确 定',
                    cancelButtonText: '取 消',
                    dangerouslyUseHTMLString: true,
                    type: 'warning'
                }).then(() => {
                    const params = {
                        projectId: this.projectId,
                        experimentIds: [item.experimentId]
                    }
                    this.$post('/experiment/deleteExperiment', params).then(res => {
                        if (res) {
                            this.setRemoveExp(item.experimentId)
                            this.$message.success('删除成功')
                            this.init()
                        }
                    })
                }).catch(() => {})
            } else {
                this.$message.error('当前实验已在画布中打开，无法删除，请关闭后再进行删除操作')
            }
        },
        handleCurrentChange (val) {
            this.currentPage = val
            this.init()
        },
        handleSizeChange (val) {
            this.pageSize = val
            this.init()
        }
    }
}
</script>
<style lang="less">
    .experiment-list {
        height: 100%;
        overflow: hidden;
    }
</style>
